<template>
	<div class="shopcart-container">
		<!-- 收货地址区域 -->
		<van-cell title="收货地址" is-link :to="{ name: 'addressList', params: { addressId: address.id } }">
			<template #label>
				<van-row>姓名：{{ address.name }}</van-row>
				<van-row>电话：{{ address.tel }}</van-row>
				<van-row>地址：{{ address.city + address.county + address.address_detail }}</van-row>
			</template>
		</van-cell>

		<!-- 商品列表 -->
		<van-card v-for="(item,i) in goodsList" :key="i" 
			:num="item.count" 
			:price="item.price" 
			:title="item.name" 
			:desc="item.title" 
			:thumb="APIDomainName + item.pic" />

		<!-- 配送信息 -->
		<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
		<van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" />

		<!-- 运费信息 -->
		<van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" />
		<van-cell title="运费" :value="`¥0.00`" />
		<van-cell title="总价" :value="`¥${amount.toFixed(2)}`" />

		<!-- 创建订单按钮 -->
		<van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
	</div>
</template>

<script>
import { createOrderAPI } from '@/api/order.js';
import { getDefaultAddressAPI } from '@/api/address.js';
import { getCartListCheckedAPI } from '@/api/cart.js';
export default {
	data() {
		return {
			goodsList: [],
			remark: '',
			// amount: 0,
			address: {}
		};
	},

	created() {
		if (this.$route.params.addressId) {
			//通过路由名 addressList 转来的
			this.address.id = this.$route.params.addressId;
		}		

		this.initDefaultAddress(); //初始默认收货地址		
		
		this.loadDataList(); //初始订单商品（购物车勾选商品）
	},
	computed:{
		amount(){
			let amount = 0;
			
			this.goodsList.forEach(item => {
				amount += item.count * item.price;
			});
			return amount
		}
	},

	methods: {
		//初始订单商品（购物车勾选商品）
		loadDataList() {
			getCartListCheckedAPI().then(result => {
				console.log(result)
				this.goodsList = result.data;				
			});
		},

		//初始默认收货地址
		initDefaultAddress() {
			getDefaultAddressAPI(this.address.id).then(result => {
				if (result.data.length == 1) {
					this.address = result.data[0];
				} else {
					//如果没有默认收货地址，提示后导航到地址列表页面（该页面还未实现）
					this.$toast('请先添加收货地址');
					setTimeout(()=>{
						this.$router.replace({
							name: 'addressList',
							params: { addressId: 9999999999 }
						});
					},2000)
				}
			});
		},

		//处理创建订单
		OnClickCreateOrder() {
			let productList = [];
			this.goodsList.forEach(item =>
				productList.push({
					product_id: item.product_id,
					count: item.count,
					price: item.price
				})
			);

			//根据接口文档，准备接口参数
			let params = {
				address_id: this.address.id,
				productList: productList,
				remark: this.remark
			};

			createOrderAPI(params).then(result => {
				this.$toast(result.msg);
				//创建成功后导航到订单列表页面（该页面还未实现）
				this.$router.push({ name: 'orderList' });
			});
		}
	}
};
</script>

<style lang="less" scoped>
.shopcart-container {
	display: flex;
	flex-direction: column;
	background: #eee;
	overflow: hidden;
	// 收货地址
	.address-container {
		background-color: #f5f5f5;
		margin: 0;
		padding: 10px;
	}
}

.van-card__title {
	font-size: 16px;
}
</style>
